
import React from 'react';
import './login.scss';
import { Link, hashHistory } from 'react-router';
import { LoginApi } from 'js/api/login';
import { Toast } from 'antd-mobile';
import { Picker, List } from 'antd-mobile';
import {
    userSession
} from 'js/core/userSession';

const Login = React.createClass({
    getInitialState() {
        return { username: userSession.getUsername(), password: userSession.getPassword(), version: null, loginFlag: true, data: [], pickerValue: null }
    },
    onSubmit(e) {
        e.preventDefault();
        LoginApi.getConnectInfo({ username: this.refs.username.value, password: this.refs.password.value }, (data) => {
            // var d = [];
            // for (let i in data) {
            //     if (data[i].APIURL === 'm.skycount.cn') {
            //         d.push(data[i])
            //     }
            // }
            // data = d;
            this.database = data;
            this.username = this.refs.username.value;
            this.password = this.refs.password.value;
            if (data && data.length === 0) {
                Toast.fail('账号或密码错误');
                return;
            } else if (data && data.length === 1) {
                this.cid = data[0].CID;
                this.login();
            } else {
                for (let i = 0; i < data.length; i++) {
                    let item = data[i];
                    item.label = item.CDBNAME;
                    item.value = item.CID;
                }
                console.log( data[0].value)
                this.setState({ loginFlag: false, data: data })
            }
        })
        return false;
    },
    onChange(val) {
        this.cid = val[0];
        console.log(val)
        this.setState({ pickerValue: val })
    },
    login() {
        LoginApi.login(this.username, this.password, this.cid, (data) => {
            if (data && data.length > 0) {
                userSession.set(data[0]);
                userSession.setKey('username', this.username);
                userSession.setKey('password', this.password);
                userSession.setKey('cid', this.cid);
                this.database.forEach((item) => {
                    if (item.CID === this.cid) {
                        userSession.setKey('APIURL', item.APIURL);
                        return
                    }
                });
                hashHistory.push('shopList');
            } else {
                Toast.fail('密码或账号错误');
            }
        });
    },
    render() {
        let node;
        if (this.state.loginFlag) {
            node = <form onSubmit={this.onSubmit} className="flex-g-1">
                <div className="flex-vcenter line ">
                    <div className="flex-col-2 flex-center"><i className="icon icon_user"></i></div>
                    <input className="flex-col-8" type="text" placeholder="用户名" name="username" ref="username" value={this.state.username} />
                </div>
                <div className="flex-vcenter line ">
                    <div className="flex-col-2 flex-center"><i className="icon icon_pwd"></i></div>
                    <input className="flex-col-8" type="password" placeholder="密码" name="password" ref="password" value={this.state.password} />
                </div>
                <button type="submit" className="submit-btn">登录</button>
                <Link className="forgot-password" to={'forgetPassword'}>忘记密码?</Link>
            </form>
        } else {
            node = <div className="flex-g-1 selectData">
                <Picker data={this.state.data} cols={1} onChange={this.onChange} value={this.state.pickerValue}>
                    <List.Item arrow="horizontal">选择数据库</List.Item>
                </Picker>
                <button type="submit" className="submit-btn" onClick={this.login}>确定</button>
            </div>
        }
        return (
            <div id="login" className="flex-col-vcenter">
                <div className="loginImg"><img src={require("img/logo.png")} /></div>
                {node}
                <div className="version">版本&nbsp;&nbsp;{this.state.version}</div>
            </div>
        );
    }
})

module.exports = Login;